<template>
  <div class="base-content">
    <div class="basic-info">
      <el-form ref="filterForm" :model="filterForm" inline>
        <el-form-item label="样品编号" prop="sampleNum">
          <el-input
            v-model="filterForm.sampleNum"
            placeholder="样品编号"
            clearable
            @keyup.enter.native="getList('filter')"
          />
        </el-form-item>
        <el-form-item class="base-filter-button">
          <el-button
            v-loading="searchLoading"
            type="primary"
            @click="selectData('filter')"
            >查询</el-button
          >
          <el-button @click="cancelForm">清空</el-button>
        </el-form-item>
      </el-form>
      <!--操作栏-->
      <div class="base-content-operate">
        <el-button
          v-rights="'Add'"
          icon="el-icon-plus"
          type="primary"
          @click="addSampleReceiving"
          >批量接收</el-button
        >
        <el-button
          v-rights="'Delete'"
          :disabled="!submitLoad"
          icon="el-icon-delete"
          type="danger"
          @click="deleteSampleReceiving"
          >删除</el-button
        >
        <!-- <el-button
          v-rights="'Export'"
          icon="el-icon-document-copy"
          type="primary"
          >导出</el-button
        >
        <el-button
          v-rights="'Export'"
          icon="el-icon-document-copy"
          type="primary"
          >导入</el-button
        > -->
        <el-button
          v-if="activeName === 'second'"
          icon="el-icon-document"
          type="primary"
          @click="exportData"
          >导出</el-button
        >
      </div>
      <el-main class="roller_main">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="待办" name="first">
            <SampleReceivingCommission
              v-if="activeName == 'first'"
              ref="SampleReceivingCommission"
              :total.sync="total"
              :load-state.sync="loadState"
              :pagination.sync="pagination"
              :filter-form.sync="filterForm"
              :system-type.sync="systemType"
            />
          </el-tab-pane>
          <el-tab-pane label="已办" name="second">
            <SampleReceivingFinished
              v-if="activeName == 'second'"
              ref="SampleReceivingFinished"
              :total.sync="total"
              :load-state.sync="loadState"
              :pagination.sync="pagination"
              :filter-form.sync="filterForm"
              :system-type.sync="systemType"
            />
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>
    <!-- 样品接收 -->
    <!-- <SampleReceivingDialog
      ref="SampleReceivingDialog"
      :total.sync="total"
      :system-type.sync="systemType"
      :pagination.sync="pagination"
      :dialog-form-visible.sync="dialogFormVisible"
      :row-data.sync="rowData"
      @closeSampleReceivingDialog="closeSampleReceivingDialog"
    /> -->
    <SampleReceivingEdit
      v-if="dialogFormVisible"
      :dialog-form-visible.sync="dialogFormVisible"
      :row-data.sync="rowData"
      @closeSampleReceivingDialog="closeSampleReceivingDialog"
    />
  </div>
</template>
<script>
import _ from "lodash";

import { deleteRecord } from "../../../api/SampleManage/SampleReceiving";
// import SampleReceivingDialog from "./SampleReceivingDialog.vue";
import SampleReceivingEdit from "./SampleReceivingEdit.vue";
import SampleReceivingCommission from "./SampleReceivingCommission.vue";
import SampleReceivingFinished from "./SampleReceivingFinished.vue";
import { getSampleRegistrationList } from "../../../api/SampleManage/SampleRegistration";
import { getConfigByKey } from "../../../api/System/SystemDict";

export default {
  name: "SampleReceivingList",
  components: {
    SampleReceivingCommission,
    // SampleReceivingDialog,
    SampleReceivingEdit,
    SampleReceivingFinished,
  },
  data() {
    return {
      submitLoad: true,
      systemType: "",
      searchLoading: false,
      loading: false,
      loadState: false,
      dialogFormVisible: false,
      editId: "",
      activeName: "first",
      filterForm: {
        sampleNum: "",
        sampleBusinessStatusCode: 10,
        idList: [],
      },
      rowData: [],
      total: 0,
      pagination: {
        pageIndex: 1,
        pageSize: 10,
      },
    };
  },
  computed: {},
  created() {
    if (this.$route.query.sampleRegistrationId) {
      this.filterForm.sampleRegistrationId =
        this.$route.query.sampleRegistrationId;
    }

    // 查询字典表判断系统类型
    getConfigByKey("SystemType").then((res) => {
      this.systemType = res.data[0].value;
    });

    // 初始化数据
    if (this.$route.query.sampleNum !== undefined) {
      this.pagination.pageIndex = 1;
      this.filterForm.sampleNum = this.$route.query.sampleNum;
      this.filterForm.finishedState = "0";
      this.filterForm.sampleBusinessStatusCode = 10;
      getSampleRegistrationList(this.filterForm, this.pagination)
        .then((res) => {
          if (res.data.dataList != null) {
            this.activeName = "first";
          } else {
            this.activeName = "second";
          }
        })
        .catch((res) => {});
    }
  },
  methods: {
    selectData() {
      this.sizeChange();
    },
    changePage(page) {
      this.pagination.pageIndex = page;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    getList() {
      if (this.activeName === "first") {
        this.filterForm.finishedState = "0";
        this.filterForm.sampleBusinessStatusCode = 10;
        this.$refs.SampleReceivingCommission.getList();
      } else {
        this.filterForm.finishedState = "1";
        this.filterForm.sampleBusinessStatusCode = 0;
        this.$refs.SampleReceivingFinished.getList();
      }
    },
    // 关闭样品接收弹框
    closeSampleReceivingDialog() {
      this.rowData = [];
      this.getList();
    },
    // 删除样品登记
    deleteSampleReceiving: _.throttle(function() {
      if (this.submitLoad) {
        this.submitLoad = false;
        if (this.activeName === "first") {
          this.$message({
            message: "请选择已办数据",
            type: "warning",
          });
          this.submitLoad = true;
          return false;
        }
        var idList = [];
        for (
          let i = 0;
          i < this.$refs.SampleReceivingFinished.tableDatas.length;
          i++
        ) {
          idList.push(this.$refs.SampleReceivingFinished.tableDatas[i].id);
        }
        deleteRecord(idList)
          .then((res) => {
            this.submitLoad = true;
            this.getList();
            this.loadState = true;
          })
          .catch((res) => {
            this.submitLoad = true;
          });
      }
    }, 2000),
    // 导出
    exportData() {
      this.$refs["SampleReceivingFinished"].exportData();
    },
    cancelForm() {
      this.$refs.filterForm.resetFields();
      this.getList("filter");
    },
    // 批量样品接收
    addSampleReceiving() {
      if (this.activeName !== "first") {
        this.$message({
          message: "请选择待办数据",
          type: "warning",
        });
        return false;
      }
      this.rowData = this.$refs.SampleReceivingCommission.tableDatas;
      if (this.rowData === null || this.rowData.length === 0) {
        this.$message({
          message: "请选择数据",
          type: "warning",
        });
        return false;
      }
      this.dialogFormVisible = true;
    },
    // 选择标签
    handleClick() {
      this.pagination = {
        pageIndex: 1,
        pageSize: 10,
      };
      if (this.activeName === "first") {
        this.filterForm.finishedState = "0";
        this.filterForm.sampleBusinessStatusCode = 10;
      } else {
        this.filterForm.finishedState = "1";
        this.filterForm.sampleBusinessStatusCode = 0;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.system-sampleRegistration-content {
  padding: 0;
  background: #f8fbff;
  display: flex;
  align-items: flex-start;

  .sampleRegistration-content {
    width: calc(100%);
    height: 100%;
    background: #fff;
    padding: 28px 20px 0;
    box-sizing: border-box;
    position: relative;
    .el-table {
      margin-top: 12px;
    }
  }
}
</style>
